<script lang="ts" setup>
import { storeToRefs } from "pinia"
import { useAppStore } from "@/store/modules/app"
import { usePermissionStore } from "@/store/modules/permission"
import { useSettingsStore } from "@/store/modules/setting"
import SidebarItem from "./SidebarItem.vue"
import SidebarLogo from "./SidebarLogo.vue"
import { getCssVariableValue } from "@/utils"

const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")


const appStore = useAppStore()
const permissionStore = usePermissionStore()
const settingsStore = useSettingsStore()

const { showSidebarLogo } = storeToRefs(settingsStore)

const sidebar = computed(() => {
  return appStore.sidebar
})

const isCollapse = computed(() => {
  return !appStore.sidebar.opened
})


</script>

<template>
  <div :class="{ 'has-logo': showSidebarLogo }">
    <SidebarItem :routes="permissionStore.routes" :is-collapse="isCollapse">
      <SidebarLogo v-if="showSidebarLogo" :collapse="isCollapse" class="scrollbar" />
    </SidebarItem>
  </div>
</template>

<style lang="scss" scoped>
.has-logo {
  .scrollbar-logo {
    height: calc(100% - var(--v3-header-height)) !important;
  }
}
</style>
